import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { Button,Input, List} from 'antd-mobile'
import { Link } from "react-router-dom"
import axios from "axios"
import { reqregister } from '../../http/api'
import {
    Toast
} from "antd-mobile"
export default class Register extends Component {
    constructor(){
        super()
        this.state={
             user:
               {
                   phone:"",
                   nickname:"",
                   password:""
            
            }
             
        }
    }
     register(){
        reqregister(this.state.user).then(res=>{
            // console.log(res);
            if(res.data.code===200){
                Toast.show({
                    content: res.data.msg,
                })
                this.props.history.push('/login')
            }
           
        })
    }
    changeuser(v,key){
           console.log(v);
           this.setState({
               user:{
                   ...this.state.user,
                   [key]:v
               }
           })
    }
    
    render() {
        let { user }=this.state
        return (
            <div>
                    <Header title="注册" register></Header>
                    <div>user：{JSON.stringify(user)}</div>
                <List.Item prefix='账号：' >
                    <Input placeholder='请输入账号' clearable onChange={(v)=>this.changeuser(v,'phone')} />
                </List.Item>
                <List.Item prefix='昵称'>
                    <Input placeholder='请输入昵称' clearable type='text' onChange={(v)=>this.changeuser(v,'nickname')} />
                </List.Item>
                <List.Item prefix='密码'>
                    <Input placeholder='请输入密码' clearable type='password' onChange={(v)=>this.changeuser(v,'password')} />
                </List.Item>

                <Button color='primary' onClick={() => this.register()}>注册</Button>
                <Link to="/login">登录</Link>
                
            </div>
        )
    }
}
